<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表页</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>百洋健康-百洋健康 专业健康咨询电商平台</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/list.css" />
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../js/list.js"></script>
   <!--  <script src="../js/page.js"></script> -->
    <!-- <script src="../js/listchuan.js"></script> -->
    <script src = "../js/common.js"></script>
    <!-- <script src="../js/cookie.js"></script> -->
    <script src="../js/list-cart.js"></script>
</head>
<!-- <script>
$(function(){
    $('.login').on('click',function(){
    $('.form').css['left','-500px'];
})
})

</script> -->
<body>
    <!-- baiyangwang -->
    <div id="baiyang">
            <!-- top-nav -->
            <div id="top">
            <!-- container -->
                <div class="container">
                    <!-- top_nav_l -->
                    <div class="top_l fl clear">
                        <p class="wel">您好，欢迎来到 百洋健康<a href="login.html">[登陆]</a><a href="reg.html">[注册]</a></p>
                    </div><!-- top_l fl -->
                    <!-- top_r -->
                    <div class="top_r fr clear">
                        <ul class="top_r_list clear">
                            <li class="top_r_list1 list0"><span>我的订单</span><span class="glyphicon glyphicon-chevron-down font"></span>
                            <div class="li-list">
                                <dl>
                                    <dt><a herf="#">待付款订单</a></dt>
                                    <dt><a herf="#">待确认收货</a></dt>
                                    <dt><a herf="#">待评价交易</a></dt>
                                </dl>
                                </div>
                            </li>
                            <li class="top_r_list2 list0"><span>我的收藏</span><span class="glyphicon glyphicon-chevron-down font"></span>
                            <div class="li-list">
                                <dl>
                                    <dt><a herf="#">商品收藏</a></dt>
                                    <dt><a herf="#">店铺收藏</a></dt>
                                </dl>
                                </div>
                            </li>
                            <li class="top_r_list3 list0"><span>客户服务</span><span class="glyphicon glyphicon-chevron-down font"></span>
                            <div class="li-list">
                                <dl>
                                    <dt><a herf="#">帮助中心</a></dt>
                                    <dt><a herf="#">售后服务</a></dt>
                                    <dt><a herf="#">客服中心</a></dt>
                                    <dt><a herf="#">商家入住</a></dt>
                                    <dt><a herf="#">商家管理</a></dt>
                                </dl>
                                </div>
                            </li>
                        </ul>
                    </div><!-- top_r fr -->
                </div><!-- top-container -->
                
            </div><!-- top -->
            <!-- header -->
            <div id="header">
            <div class="container">
            <!-- logo -->
                <div class="header-l fl">
                    <a href="../index.html"><h1>百洋健康</h1></a>
                </div>
                <!-- search -->
                <!-- <div class="header-c"> -->
                        <div class="col-lg-6 header-c">
                            <div class="input-group" >
                            <div class="input-group-btn">
                                <div type="text" class="form-control search-l"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    商品<span class="caret"></span>
                                </div>
                                <!-- dropdown-menu -->
                                <ul class="dropdown-menu menu">
                                    <li><a href="#">商品</a></li>
                                    <li><a href="#">店铺</a></li>
                                </ul>
                                </div><!-- input-group-btn -->
                                <input type="search" class="form-control search-c" placeholder="请输入您要搜索的商品"/>
                                <input type="button" class="search-r input-group-btn" data-toggle="dropdown" value="搜索"/>

                            </div><!-- input-group -->
                            <ul class="header-list">
                                <li><a href="#">儿童补钙</a></li>
                                <li><a href="#">蛋白粉</a></li>
                                <li><a href="#">面膜</a></li>
                                <li><a href="#">汇仁</a></li>
                            </ul>
                                
                            
                        </div><!-- col-lg-6 -->
                        <!-- </div> --><!-- header-c -->

                        <!-- header-r -->
                <div class="header-r fr">
                        <div class="shop fl">
                        <i class="glyphicon glyphicon-user"></i>我的商城<span class="caret  up">
                        </span>
                        <div class="shop-list">
                        <dl class="dl0">
                        <dt class="dt1"><a href="#">我的用户中心</a><i class="glyphicon glyphicon-menu-right"></i></dt>
                        <dl class="fl dl1">
                             <dd><a href="#">站内消息</a></dd>
                             <dd><a href="#">咨询回复</a></dd>
                             <dd><a href="#">代金券</a></dd>
                        </dl>
                        <dl class="fr dl2">
                        <dd><a href="#">我的订单</a><i class="glyphicon glyphicon-menu-right"></i></dd>
                       
                        <dd><a href="#">我的收藏</a><i class="glyphicon glyphicon-menu-right"></i></dd>
                        
                        <dd><a href="#">我的积分</a><i class="glyphicon glyphicon-menu-right"></i></dd>
                        </dl>
                            <dt class="fl dt2">最近浏览的商品<a href="#">全部浏览历史</a></dt>
                        </dl>
                        <p class="ts"></p>
                        </div>
                        </div>
                        <div class="cart fl"><i class="glyphicon glyphicon-shopping-cart"></i>购物车结算<span class="caret  up"></span>
                            <ul class="cart-list">
                                <li>最新加入的商品</li>
                                <li></li>
                                <li class="cart-list3"><input type="submit" class="btn js"value="结算购物车中的商品"/></li>
                            </ul>

                        </div>
                    
                </div>
                </div><!-- header-container -->
            </div><!-- header -->
            <!-- nav -->
            <div id="nav">
                <div class="container">
                    <div class="nav-list">
                        <div class="all fl">
                            <i class="glyphicon glyphicon-menu-hamburger"></i>全部分类

                            <!-- 三级导航 -->
                            <ul class="sanji">
                                <li class="sanji01 sanji0">
                                <a href="#" class="sanji00">微量元素</a>
                                 <div class="sanji1">
                                        <ul class="sanji11">
                                            <li><a href="#">维生素C</a></li>
                                            <li><a href="#">维生素D</a></li>
                                            <li><a href="#">多种维生素</a></li>
                                            <li><a href="#" >钙</a></li>
                                        </ul>
                                        <div class="sanji2"> 
                                            <p class="fl"><a href="#">维生素</a><span> &gt;</span></p>
                                            <ul class="sanji3">
                                            <li><a href="#" class="sanji111">维生素B</a></li>
                                                <li><a href="#" >维生素A</a></li>
                                                <li><a href="#">维生素B</a></li>
                                                <li><a href="#">维生素C</a></li>
                                                <li><a href="#">维生素D</a></li>
                                                <li><a href="#">维生素E</a></li>
                                                <li><a href="#">维生素K</a></li>
                                                <li><a href="#" class="sanji55">多种维生素</a></li>
                                            </ul>
                                        </div>
                                        <div class="sanji4">
                                            <p class="fl"><a href="#">矿物质</a><span> &gt;</span></p>
                                            <ul class="sanji5">
                                                <li><a href="#">钙</a></li>
                                                <li><a href="#">铁</a></li>
                                                <li><a href="#">锌</a></li>
                                            </ul>
                                        </div>
                                        
       

   
                                    </div>

                                </li>
                                <li class="sanji02 sanji0">
                                <a href="#" class="sanji00">营养补充</a>






                                </li>
                                <li class="sanji03 sanji0"><a href="#" class="sanji00">健身运动</a></li>
                                <li class="sanji04 sanji0"><a href="#" class="sanji00">美妆/个护</a></li>
                                <li class="sanji05 sanji0"><a href="#" class="sanji00">妈咪宝贝</a></li>
                                <li class="sanji06 sanji0"><a href="#" class="sanji00">家居/数码</a></li>
                                <li class="sanji07 sanji0"><a href="#" class="sanji00">中西药品</a></li>
                                <li class="sanji08 sanji0"><a href="#" class="sanji00">滋补保健</a></li>
                                <li class="sanji09 sanji0"><a href="#" class="sanji00">性福生活</a></li>
                                <li class="sanji10 sanji0"><a href="#" class="sanji00">环球美食</a></li>
                            </ul>


                           
                        </div>
                        <ul class="navlist fr">
                            <li><a href="../index.html" class="index">首页</a></li>
                            <li><a href="#">钙铁锌</a></li>
                            <li><a href="#">营养补充</a></li>
                            <li><a href="#">美妆个护</a></li>
                            <li ><a href="#" class="last">妈咪宝贝</a></li>
                    </ul>
                    </div>
                    
                </div>
                <div class="page1"></div>
            </div>

            <!-- //banner -->
            <div id="banner">
                <div class="container">
                    <img src="../img/05814333522460562.jpg"/>
                </div>
            </div>
            
            <!-- //层级导航 -->
            <div id="main-nav">
                <div class="container">
                        <ul>
                            <li><i class="glyphicon glyphicon-home"></i><a href="../index.html">首页</a> &gt;</li>

                            <li>微量元素</li>
                        </ul>
                </div>
            </div>
            <!-- //main-nav2 -->
            <div id="main-nav2">
                <div class="container">
                    <div class="fs">
                        <div class="fs1">
                        排序方式：
                        <ul>
                            <li class="selected"><a href="#">默认</a></li>
                            <li><a href="javascript:void(0)">销量<i class="glyphicon glyphicon-arrow-down"></i></a></li>
                            <li class="price1"><a href="javascript:void(0)">价格<i class="glyphicon glyphicon-arrow-up"></i></a></li>
                            <li class="price2"><a href="javascript:void(0)">价格<i class="glyphicon glyphicon-arrow-down"></i></a></li>
                        </ul>
                            
                            
                            
                            
                        </div>
                       
                        <div class="pt">
                            <ul>
                                <li><a href=""><input type="checkbox"/>平台自营</a></li>
                                <li><a href=""><input type="checkbox"/>赠品</a></li>
                                <li><a href=""><input type="checkbox"/>CFDA认证</a></li>
                                <dl>
                                <li><a href=""><input type="checkbox"/>30天无忧售后</a></li>
                                <li><a href=""><input type="checkbox"/>7天无忧售后</a></li>
                                <li><a href=""><input type="checkbox"/>跨境商品</a></li>
                                <li><a href=""><input type="checkbox"/>药品</a></li></dl>
                            </ul>
                        </div>


                         <div class="input-group group" >
                            <div class="input-group-btn mainnav_l">
                                <div type="text" class="form-control "data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:0;top:3px;">
                                    请选择<span class="caret ca" style="margin-left:50px;"></span>
                                </div>
                                <!-- dropdown-menu -->
                                <ul class="dropdown-menu menu mainmenu" style="top:94%;border-radius:0;">
                                    <li><a href="#">请选择</a></li>
                                    <li><a href="#">一般货易</a></li>
                                    <li><a href="#">保税备货</a></li>
                                    <li><a href="#">跨境直邮</a></li>

                                </ul>
                                </div><!-- input-group-btn -->
                    </div>

                    <!-- <div class="shopcity">
                        商品所在地:
                        <div class="city">
                            <div class="holder">
                                <em nc_type="area_name">不限地区</em>
                            </div>
                            <div class="select">
                                <a nc_type="area_name">不限地区</a>
                            </div>
                        </div>
                    </div> -->

                </div>
                <div id="main-list">
                    <ul class="datalist ">
                        
                    </ul>
                    <div class="page">
                        
                    </div>
                
            </div>

            </div>
            </div>

            




        <!-- bottom -->
            <div id="bottom">
                <div class="container">
                    <div class="bimg2"><img src="../img/zhaoshang09_03.jpg"/></div>
                </div>
            </div>
            <!-- footer -->
            <div id="footer">
                <div class="container">
                    <div class="footer-l fl">
                        <h1>百洋健康</h1>
                        <div class="gz">
                            <span>关注我们</span>
                            <a href="#"><img src="../img/weibo02.png"/></a>
                            <a href="#"><img src="../img/weixin01.png"/></a>
                        
                        <div class="wb">
                        <img src="../img/weibo_qr.jpg"class="weibo"/>
                        <img src="../img/wexin_qr02.jpg"class="weixin"/>
                        </div>
                        </div>
                    </div>
                    <div class="footer-c fl">
                        <ul>
                            <li>新手指南
                            <dl>
                                <a href="#"><dd>购买流程</dd></a>
                                <a href="#"><dd>支付方式</dd></a>
                                <a href="#"><dd>通关税费</dd></a>
                            </dl>

                            </li>
                            <li>售后服务
                                <dl>
                                    <a href="#"><dd>退货政策</dd></a>
                                    <a href="#"><dd>退货流程</dd></a>
                                    <a href="#"><dd>退货细则</dd></a>
                                    <a href="#"><dd>退款流程</dd></a>
                                </dl>
                            </li>
                            <li>物流配送
                                <dl>
                                <a href="#"><dd>配送方式</dd></a>
                                <a href="#"><dd>物流跟踪</dd></a>
                                <a href="#"><dd>自选物流</dd></a>
                            </dl>
                            </li>
                            <li>关于我们
                                <dl>
                                <a href="#"><dd>公司简介</dd></a>
                                <a href="#"><dd>联系我们</dd></a>
                                <a href="#"><dd>招商合作</dd></a>
                            </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-r fr">
                        <div class="wapp fl">
                            <p class="tp"><img src="../img/weixin-qr.jpg" alt="" /></p>
                            <p class="wz">扫描进入微信商城</p>
                        </div>
                        <div class="app fl">
                            <p class="tp"><img src="../img/app-qr.jpg" alt="" /></p>
                            <p class="wz">扫描下载百洋APP</p>
                        </div>
                    </div>
                </div>
            </div>


            <div id="end">
                <div class="container">
                    <div class="end1">
                        <a href="#"  class="end11">首页</a>
                        <a href="#">联系我们</a>
                    </div>
                    <p class="end2">版权所有 © 2007-2018 青岛百洋健康药房连锁有限公司 百洋健康 鲁ICP备09091598号</p>
                    <div class="end3">
                        <a href="#"><img src="../img/jubao.jpg" alt="" /></a>
                        <a href="#"><img src="../img/chengxin.jpg" alt="" /></a>
                        <a href="#"><img src="../img/hangye.jpg" alt="" /></a>
                    </div>
                </div>
            </div>
    </div><!-- baiyang -->
    <div id="side">
        <div class="pos">
        <div class="login">
        <a href="javascript:void(0)">
            <img src="../img/05755058785008341.jpg" alt="" />
        </a>
        <div class="details" id="details">会员登录</div>
        <div class="form">
            <div class="log">
            <span style="position:absolute;right:20px;top:0px;" class="close">&times;</span>
                <label for="username">登录名</label><br>
                <input type="text" id="username" name="username"/>
                
            </div>
            <div class="psw">
                <label for="password">登录密码
                    <a href="#">忘记密码?</a>
                </label><br>
                <input type="password" id="password" name="password"/>
                
            </div>
            <div class="code">
                <label for="code">
                    验证码
                    <span class="udcode">更换验证码</span>
                </label><br>
                <input type="text" id="code"/><span class="showcode"></span>
            </div>
            <div class="ts">
                
            </div>
        <div class="lg"><a href="index.html">确认</a></div>
        <div class="zc">
            <a href="html/reg.html">注册新用户</a>
        </div>
        </div>
        </div>
        <div class="car">
            <a href="#"><i class="glyphicon glyphicon-shopping-cart"></i>
            购物车</a>
        </div>
        <div class="msg">
            <a href="#"><i class="glyphicon glyphicon-comment"></i></a>
            <div class="details" id="details">在线联系</div>
        </div>
        <div class="comp">
            <a href="#"><i class="glyphicon glyphicon-tent"></i></a>
            <div class="details" id="details">商品对比</div>
        </div>
        </div>
        <div class="back">
            <a href="#">
            <i class="glyphicon glyphicon-arrow-up"></i>TOP</a>
            <div class="details" id="details">返回顶部</div>
        </div>
        

        <div class="cart_list">
            <p class="sl"><span class="fl" style="font-size:24px">我的购物车</span><span class="fr"><i class="glyphicon glyphicon-remove-sign gb"></i></span></p>
            <ul></ul>
        </div>








    </div>

</body>
<script>
    document.addEventListener('DOMContentLoaded',()=>{
                
                let toTop = document.querySelector('.back');
                let login = document.querySelector('.login');
                let close = document.querySelector('.close');
                let form = document.querySelector('.form')
                // 点击返回顶部
            toTop.onclick = ()=>{
                let timer = setInterval(()=>{
                    // 计算缓冲速度
                    let speed = Math.ceil(window.scrollY/5);//1

                    scrollBy(0,-speed);


                    if(window.scrollY <= 0){
                        clearInterval(timer);
                    }
                },30)
            }
            login.onclick = ()=>{
                if(form.style.display = 'none'){
                    form.style.display = 'block';
                }
               else if(form.style.display = 'block'){
                form.style.display = 'none';
               }


            }
            close.onclick = ()=>{
                form.style.display = 'none';
            }



        // let datalist = document.querySelector('.datalist');

        // let items = datalist.children;

        // // let timer

        // // 遍历实现鼠标移入移出效果
        // for(var i=0;i<items.length;i++){
        //     items[i].onmouseover = function(){
        //         clearInterval(this.timer);

        //         // 获取对应a标签
        //         let dh = this.children[1];

        //         // 目标值
        //         let target = 5;

        //         this.timer = setInterval(()=>{
        //             // 获取当前值
        //             let top = link.offsetTop;

        //             // 计算缓冲速度
        //             let speed = Math.floor((target - top)/10);

        //             top += speed;

        //             if(top <= target){
        //                 clearInterval(this.timer);

        //                 // 重置目标值
        //                 top = target;
        //             }

        //             link.style.top = top + 'px';
        //         },30)
        //     }


        //     items[i].onmouseout = function(){
        //         clearInterval(this.timer);

        //         // 获取对应a标签
        //         let link = this.children[1];

        //         // 目标值
        //         let target = 230;

        //         this.timer = setInterval(()=>{
        //             // 获取当前值
        //             let top = link.offsetTop;

        //             // 计算缓冲速度
        //             let speed = Math.ceil((target - top)/10);

        //             top += speed;

        //             if(top >= target){
        //                 clearInterval(this.timer);

        //                 // 重置目标值
        //                 top = target;
        //             }

        //             link.style.top = top + 'px';
        //         },30)
            // }
        // }
     });
</script>
</html>